<template>
    <ContentField>
        <div class="row">
            <div class="col-3">
                <UserProfileInfo :user="user" @follow="follow" @unfollow="unfollow" />
            </div>
            <div class="col-9">
                <UserProfilePosts :post_list="post_list" />
            </div>
        </div>
    </ContentField>
</template>

<script>
import ContentField from '../components/ContentField.vue';
import UserProfileInfo from '../components/UserProfileInfo.vue';
import UserProfilePosts from '../components/UserProfilePosts.vue';

import { reactive } from 'vue';

export default {
    name: 'UserProfileView',
    components: {
        ContentField,
        UserProfileInfo,
        UserProfilePosts,
    },
    setup(){
        let user = reactive({
            id: 1,
            username: 'lky',
            followersCount: 0,
            is_followed: false,
        });

        let post_list = reactive(
            {
                count: 4, //帖子的数量
                posts: //帖子列表
                    [           
                        {
                            id: 1,
                            user_id: 1,
                            content: '今天上了vue的课程，很开心！',
                        },
                        {
                            id: 2,
                            user_id: 1,
                            content: 'Java很简单！',
                        },
                        {
                            id: 3,
                            user_id: 1,
                            content: '今晚我要吃汉堡！',
                        },
                        {
                            id: 4,
                            user_id: 1,
                            content: '马上放假了！',
                        },
                    ]           
            });

        const follow = () => {
            //is_followed变为true
            if(user.is_followed) return;
            user.is_followed = true;
            //粉丝数加1 
            user.followersCount ++;
        };

        const unfollow = () => {
            //is_followed变为false
            if(!user.is_followed) return;
            user.is_followed = false;
            //粉丝数减1 
            user.followersCount --;
        };

        return {
            user,
            follow,
            unfollow,
            post_list,
        }
    }
}
</script>

<style scoped>

</style>